<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="dataSource" 
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: skeys => selectedRowKeys = skeys }"
      :pagination="false" 
      bordered
    >
      <template slot="title" slot-scope="currentPageData">
        <a-button type="primary" @click="isAdd = true">添加连线</a-button>
        <a-button type="primary" @click="onEdit">编辑连线</a-button>
        <a-button type="primary" @click="init">刷新</a-button>
        <a-button type="danger" @click="onDel">删除连线</a-button>
      </template>
      <template slot="operation" slot-scope="text, record, index">
          <a-button v-if="index > 0" type="link" @click="reorder(text, true)">上移</a-button>
          <a-button v-if="index < (dataSource.length - 1)" type="link" @click="reorder(text, false)">下移</a-button>
      </template>
    </a-table>

    <template v-if="isAdd">
      <flow-chart-line-editor :show.sync="isAdd" :is-edit="false" :data="{ nodeId: targetNodeId }" @on-close="init" />
    </template>  
    <template v-if="isEdit">
      <flow-chart-line-editor :show.sync="isEdit" :is-edit="true" :data="editData" @on-close="init" />
    </template>
  </div>
</template>

<script lang="es6">
const columns = [
  {
    title: '开始节点名称',
    dataIndex: 'nodeName'
  },
  {
    title: '名称',
    dataIndex: 'desc',
    customRender: text => text||'/'
  },
  {
    title: '结束节点名称',
    dataIndex: 'nextNodeName'
  },
  {
    title: '操作',
    dataIndex: 'id',
    scopedSlots: { customRender: 'operation' }
  }
];

module.exports = asyncRequire([
    'mixins',
    'alias!@PAGE/components/localNodes',
], function(MXS, NodeAPI, resolve, reject) {
  resolve({
    name: 'FlowChartLineList',
    mixins: [MXS.CommonMixin],
    components: {
      FlowChartLineEditor: load('./FlowChartLineAE')
    },
    props: {
      targetNodeId: {
        type: String,
        default: ''
      },
      isNullValDoesNotQuery: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        columns: columns,
        dataSource: [],
        selectedRowKeys: [],
        isAdd: false,
        isEdit: false,
        editData: {},
      }
    },
    watch: {
      targetNodeId (newVal) {
        this.init();
      }
    },
    mounted () {
      this.init();
    },
    methods: {
      init () {
        if(!this.targetNodeId && this.isNullValDoesNotQuery) {
          return;
        }

        this.dataSource = [];
        let allData = NodeAPI.findAll();
        let nodes = allData.nodes;  
        allData.lines
          .filter(line => !!this.targetNodeId ? line.nodeId === this.targetNodeId : true)
          .forEach(line => {
            line.nodeName = nodes.find(node => node.id === line.nodeId).name;
            line.nextNodeName = nodes.find(node => node.id === line.nextNodeId).name;
            this.dataSource.push(line);
          });
      },
      
      onEdit () {
        if(this.selectedRowKeys.length !== 1) {
          return this.$message.error('有且仅能选择一行');
        }
        this.editData = this.dataSource[this.selectedRowKeys[0]];
        this.isEdit = true;
      },

      reorder (lineId, isUp) {
        NodeAPI.reorderLine(lineId, isUp);
        this.init();
      },

      onDel () {
        if(this.selectedRowKeys.length === 0) {
          return this.$message.error('至少选择一行');
        }
        this.$confirm({
          title: '提示',
          content: `确认删除选择的${this.selectedRowKeys.length}条连线吗?`,
          onOk: () => {
            var delLineIds = this.dataSource.filter((item, index) => this.selectedRowKeys.findIndex(key => key === index) >= 0).map(line => line.id);
            NodeAPI.deleteLines(delLineIds);
            this.selectedRowKeys = [];
            this.init();
          }
        });
      }
    }
  });
});
</script>

<style scoped>
  
</style>
